<template>
  <div class="system-logs-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-background"></div>
      <div class="header-content">
        <div class="header-left">
          <div class="header-icon">
            <el-icon size="32"><Document /></el-icon>
          </div>
          <div class="header-text">
            <h1>系统日志</h1>
            <p>实时监控系统活动，查看操作记录和异常信息，保障系统安全运行</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" size="large" @click="refreshLogs" class="action-btn primary-btn">
            <el-icon><Refresh /></el-icon>
            刷新日志
          </el-button>
          <el-button type="success" size="large" @click="exportLogs" class="action-btn success-btn">
            <el-icon><Download /></el-icon>
            导出日志
          </el-button>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon total-icon">
              <el-icon size="24"><Document /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ logs.length }}</div>
              <div class="stat-label">总日志数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon info-icon">
              <el-icon size="24"><InfoFilled /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ infoLogsCount }}</div>
              <div class="stat-label">信息日志</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon warning-icon">
              <el-icon size="24"><Warning /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ warningLogsCount }}</div>
              <div class="stat-label">警告日志</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon error-icon">
              <el-icon size="24"><CircleClose /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ errorLogsCount }}</div>
              <div class="stat-label">错误日志</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 筛选区域 -->
    <el-card class="filter-card" shadow="hover">
      <template #header>
        <div class="filter-header">
          <el-icon size="20" class="filter-icon"><Filter /></el-icon>
          <span class="filter-title">日志筛选</span>
          <el-tag type="info" size="small">{{ filteredLogs.length }} 条记录</el-tag>
        </div>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            v-model="searchQuery"
            placeholder="搜索日志内容..."
            class="filter-input"
            clearable
            @input="filterLogs"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-select 
            v-model="typeFilter" 
            placeholder="日志类型" 
            clearable 
            @change="filterLogs"
            class="filter-select"
          >
            <el-option label="全部类型" value="" />
            <el-option label="信息" value="info" />
            <el-option label="警告" value="warning" />
            <el-option label="错误" value="error" />
            <el-option label="成功" value="success" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="filterLogs"
            class="filter-date-picker"
          />
        </el-col>
        <el-col :span="4">
          <el-select 
            v-model="userFilter" 
            placeholder="操作用户" 
            clearable 
            @change="filterLogs"
            class="filter-select"
          >
            <el-option label="全部用户" value="" />
            <el-option label="系统" value="system" />
            <el-option v-for="user in users" :key="user.id" :label="user.name" :value="user.id" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" text @click="clearFilters" class="clear-filters-btn">
            <el-icon><Delete /></el-icon>
            清除筛选
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 日志列表 -->
    <el-card class="logs-table-card" shadow="hover">
      <template #header>
        <div class="table-header">
          <div class="header-left">
            <el-icon size="20" class="header-icon"><List /></el-icon>
            <span class="header-title">系统日志列表</span>
            <el-tag type="info" size="small">{{ filteredLogs.length }} 条记录</el-tag>
          </div>
          <div class="header-right">
            <el-button type="primary" text @click="refreshLogs" class="refresh-btn">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <el-table
        :data="filteredLogs"
        v-loading="loading"
        style="width: 100%"
        class="logs-table"
        :header-cell-style="{ background: '#f8f9fa', color: '#606266' }"
        stripe
        :row-class-name="getRowClassName"
      >
        <el-table-column prop="id" label="ID" width="80" align="center">
          <template #default="{ row }">
            <el-tag size="small" type="info">#{{ row.id }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="100" align="center">
          <template #default="{ row }">
            <el-tag 
              :type="getLogTypeTag(row.type)" 
              size="small"
              class="log-type-tag"
              effect="dark"
            >
              <el-icon size="12" class="tag-icon">
                <component :is="getLogTypeIcon(row.type)" />
              </el-icon>
              {{ getLogTypeText(row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="message" label="日志内容" min-width="300">
          <template #default="{ row }">
            <div class="log-message">
              <el-icon size="16" class="message-icon"><ChatDotRound /></el-icon>
              <span class="message-text">{{ row.message }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="user_name" label="操作用户" width="140">
          <template #default="{ row }">
            <div class="user-info">
              <div class="user-avatar">
                <el-icon size="16"><User /></el-icon>
              </div>
              <span class="user-name">{{ row.user_name || '系统' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ip_address" label="IP地址" width="140">
          <template #default="{ row }">
            <div class="ip-cell">
              <el-icon size="16" class="ip-icon"><Location /></el-icon>
              <span class="ip-text">{{ row.ip_address || '未知' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="时间" width="180">
          <template #default="{ row }">
            <div class="time-cell">
              <el-icon size="16" class="time-icon"><Clock /></el-icon>
              <span class="time-text">{{ formatDate(row.created_at) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template #default="{ row }">
            <el-button 
              size="small" 
              type="primary" 
              text 
              @click="viewLogDetail(row)"
              class="action-btn"
            >
              <el-icon><View /></el-icon>
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div v-if="filteredLogs.length === 0 && !loading" class="empty-state">
        <el-empty description="暂无日志数据" :image-size="120">
          <el-button type="primary" @click="refreshLogs">刷新日志</el-button>
        </el-empty>
      </div>
    </el-card>

    <!-- 日志详情对话框 -->
    <el-dialog
      v-model="showLogDetail"
      title="日志详情"
      width="700px"
      class="log-detail-dialog"
      :close-on-click-modal="false"
    >
      <div v-if="selectedLog" class="log-detail-content">
        <div class="log-header">
          <div class="log-type-display">
            <el-tag 
              :type="getLogTypeTag(selectedLog.type)" 
              size="large"
              class="detail-type-tag"
            >
              <el-icon size="16">
                <component :is="getLogTypeIcon(selectedLog.type)" />
              </el-icon>
              {{ getLogTypeText(selectedLog.type) }}
            </el-tag>
          </div>
          <div class="log-time">
            <el-icon size="16"><Clock /></el-icon>
            <span>{{ formatDate(selectedLog.created_at) }}</span>
          </div>
        </div>
        
        <el-divider />
        
        <el-descriptions :column="1" border class="log-descriptions">
          <el-descriptions-item label="日志ID">
            <el-tag size="small" type="info">#{{ selectedLog.id }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="日志内容">
            <div class="detail-message">
              <el-icon size="16" class="detail-icon"><ChatDotRound /></el-icon>
              <span>{{ selectedLog.message }}</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="操作用户">
            <div class="detail-user">
              <div class="detail-avatar">
                <el-icon size="16"><User /></el-icon>
              </div>
              <span>{{ selectedLog.user_name || '系统' }}</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="IP地址">
            <div class="detail-ip">
              <el-icon size="16" class="detail-icon"><Location /></el-icon>
              <span>{{ selectedLog.ip_address || '未知' }}</span>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showLogDetail = false" size="large">关闭</el-button>
          <el-button 
            type="primary" 
            @click="exportSingleLog" 
            size="large"
            class="export-btn"
          >
            <el-icon><Download /></el-icon>
            导出此条日志
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Refresh, 
  Download, 
  Document, 
  InfoFilled, 
  Warning, 
  CircleClose, 
  Filter, 
  Search, 
  List, 
  User, 
  Location, 
  Clock, 
  View, 
  ChatDotRound, 
  Delete 
} from '@element-plus/icons-vue'

interface SystemLog {
  id: number
  type: string
  message: string
  user_id?: number
  user_name?: string
  ip_address?: string
  created_at: string
}

const logs = ref<SystemLog[]>([])
const loading = ref(false)
const showLogDetail = ref(false)
const selectedLog = ref<SystemLog | null>(null)

// 筛选和搜索
const searchQuery = ref('')
const typeFilter = ref('')
const dateRange = ref<[string, string] | null>(null)
const userFilter = ref('')

// 模拟用户数据
const users = ref([
  { id: 1, name: '管理员' },
  { id: 2, name: '张老师' },
  { id: 3, name: '李老师' }
])

// 计算属性
const filteredLogs = computed(() => {
  return logs.value.filter(log => {
    const matchesSearch = !searchQuery.value || 
      log.message.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      (log.user_name && log.user_name.toLowerCase().includes(searchQuery.value.toLowerCase()))
    
    const matchesType = !typeFilter.value || log.type === typeFilter.value
    
    const matchesUser = !userFilter.value || 
      (userFilter.value === 'system' && !log.user_name) ||
      log.user_id === parseInt(userFilter.value)
    
    let matchesDate = true
    if (dateRange.value && dateRange.value[0] && dateRange.value[1]) {
      const logDate = new Date(log.created_at)
      const startDate = new Date(dateRange.value[0])
      const endDate = new Date(dateRange.value[1])
      matchesDate = logDate >= startDate && logDate <= endDate
    }
    
    return matchesSearch && matchesType && matchesUser && matchesDate
  })
})

const infoLogsCount = computed(() => {
  return logs.value.filter(log => log.type === 'info').length
})

const warningLogsCount = computed(() => {
  return logs.value.filter(log => log.type === 'warning').length
})

const errorLogsCount = computed(() => {
  return logs.value.filter(log => log.type === 'error').length
})

// 工具函数
const getLogTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    info: '信息',
    warning: '警告',
    error: '错误',
    success: '成功'
  }
  return typeMap[type] || type
}

const getLogTypeTag = (type: string) => {
  const typeMap: Record<string, string> = {
    info: 'info',
    warning: 'warning',
    error: 'danger',
    success: 'success'
  }
  return typeMap[type] || 'info'
}

const getLogTypeIcon = (type: string) => {
  const iconMap: Record<string, string> = {
    info: 'InfoFilled',
    warning: 'Warning',
    error: 'CircleClose',
    success: 'Check'
  }
  return iconMap[type] || 'InfoFilled'
}

const formatDate = (dateStr: string) => {
  return new Date(dateStr).toLocaleString('zh-CN')
}

const getRowClassName = ({ row }: { row: SystemLog }) => {
  if (row.type === 'error') {
    return 'error-log-row'
  } else if (row.type === 'warning') {
    return 'warning-log-row'
  }
  return ''
}

// 方法
const loadLogs = async () => {
  loading.value = true
  try {
    // 模拟加载日志数据
    await new Promise(resolve => setTimeout(resolve, 1000))
    logs.value = [
      {
        id: 1,
        type: 'info',
        message: '用户登录成功',
        user_id: 1,
        user_name: '管理员',
        ip_address: '192.168.1.100',
        created_at: '2024-01-21T10:30:00'
      },
      {
        id: 2,
        type: 'success',
        message: '创建新题目成功',
        user_id: 2,
        user_name: '张老师',
        ip_address: '192.168.1.101',
        created_at: '2024-01-21T10:25:00'
      },
      {
        id: 3,
        type: 'warning',
        message: '用户尝试访问未授权页面',
        user_id: 3,
        user_name: '李老师',
        ip_address: '192.168.1.102',
        created_at: '2024-01-21T10:20:00'
      },
      {
        id: 4,
        type: 'error',
        message: '数据库连接失败',
        ip_address: '192.168.1.103',
        created_at: '2024-01-21T10:15:00'
      },
      {
        id: 5,
        type: 'info',
        message: '系统启动完成',
        ip_address: '192.168.1.104',
        created_at: '2024-01-21T10:00:00'
      },
      {
        id: 6,
        type: 'success',
        message: '批量导入学生数据成功',
        user_id: 1,
        user_name: '管理员',
        ip_address: '192.168.1.100',
        created_at: '2024-01-21T09:45:00'
      },
      {
        id: 7,
        type: 'warning',
        message: '系统内存使用率超过80%',
        ip_address: '192.168.1.105',
        created_at: '2024-01-21T09:30:00'
      },
      {
        id: 8,
        type: 'info',
        message: '定时任务执行完成',
        ip_address: '192.168.1.106',
        created_at: '2024-01-21T09:15:00'
      }
    ]
  } catch (error) {
    console.error('加载日志失败:', error)
    ElMessage.error('加载日志失败')
  } finally {
    loading.value = false
  }
}

const refreshLogs = () => {
  loadLogs()
}

const filterLogs = () => {
  // 过滤逻辑已在computed中实现
}

const clearFilters = () => {
  searchQuery.value = ''
  typeFilter.value = ''
  dateRange.value = null
  userFilter.value = ''
}

const viewLogDetail = (log: SystemLog) => {
  selectedLog.value = log
  showLogDetail.value = true
}

const exportLogs = () => {
  ElMessage.success('日志导出功能开发中...')
}

const exportSingleLog = () => {
  if (selectedLog.value) {
    ElMessage.success(`正在导出日志 #${selectedLog.value.id}...`)
  }
}

onMounted(() => {
  loadLogs()
})
</script>

<style scoped lang="scss">
.system-logs-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
}

/* 页面头部 */
.page-header {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px 30px;
  margin-bottom: 30px;
  overflow: hidden;
}

.header-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.header-content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 15px;
  backdrop-filter: blur(10px);
}

.header-text h1 {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-text p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
  max-width: 600px;
  line-height: 1.5;
}

.header-actions {
  display: flex;
  gap: 15px;
}

.action-btn {
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.primary-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.success-btn {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  border: none;
}

/* 统计卡片 */
.stats-section {
  padding: 0 30px 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.total-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.info-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.warning-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.error-icon {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

/* 筛选卡片 */
.filter-card {
  margin: 0 30px 20px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.filter-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-icon {
  color: #409eff;
}

.filter-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.filter-input,
.filter-select,
.filter-date-picker {
  width: 100%;
}

.filter-input :deep(.el-input__wrapper),
.filter-select :deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.clear-filters-btn {
  border-radius: 20px;
  padding: 8px 16px;
}

/* 日志列表卡片 */
.logs-table-card {
  margin: 0 30px 30px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  border: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  color: #409eff;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.refresh-btn {
  border-radius: 20px;
  padding: 8px 16px;
}

/* 表格样式 */
.logs-table {
  border-radius: 8px;
  overflow: hidden;
}

.logs-table :deep(.el-table__header) {
  background: #f8f9fa;
}

.logs-table :deep(.el-table__row:hover) {
  background: #f0f9ff !important;
}

.log-type-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 20px;
  padding: 4px 12px;
}

.tag-icon {
  margin-right: 2px;
}

.log-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 280px;
}

.message-icon {
  color: #909399;
  margin-top: 2px;
  flex-shrink: 0;
}

.message-text {
  color: #606266;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.user-name {
  font-weight: 500;
  color: #303133;
}

.ip-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ip-icon {
  color: #909399;
}

.ip-text {
  color: #606266;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.time-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.time-icon {
  color: #909399;
}

.time-text {
  color: #606266;
  font-size: 13px;
}

.action-btn {
  border-radius: 20px;
  padding: 6px 12px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 0;
}

/* 错误日志行样式 */
:deep(.error-log-row) {
  background-color: #fef0f0 !important;
}

:deep(.error-log-row:hover) {
  background-color: #fde2e2 !important;
}

:deep(.warning-log-row) {
  background-color: #fdf6ec !important;
}

:deep(.warning-log-row:hover) {
  background-color: #fbe7c6 !important;
}

/* 对话框样式 */
.log-detail-dialog {
  border-radius: 16px;
}

.log-detail-dialog :deep(.el-dialog__header) {
  border-bottom: 1px solid #ebeef5;
  padding: 20px 24px;
}

.log-detail-dialog :deep(.el-dialog__body) {
  padding: 24px;
}

.log-detail-dialog :deep(.el-dialog__footer) {
  border-top: 1px solid #ebeef5;
  padding: 20px 24px;
}

.log-detail-content {
  padding: 20px 0;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.detail-type-tag {
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 16px;
}

.log-time {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #909399;
  font-size: 14px;
}

.log-descriptions {
  margin-top: 20px;
}

.detail-message,
.detail-user,
.detail-ip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.detail-icon {
  color: #909399;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.export-btn {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-section .el-col {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 30px 20px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .header-text h1 {
    font-size: 24px;
  }
  
  .stats-section,
  .filter-card,
  .logs-table-card {
    margin: 0 20px 20px;
  }
  
  .filter-section .el-row .el-col {
    margin-bottom: 15px;
  }
  
  .log-message {
    max-width: 200px;
  }
}
</style>
